<template>
  <Layout :fullPage="true">
    <div class="dashboard-container">
      <!-- 头部区域 -->
      <div class="dashboard-header">
        <h1 class="dashboard-title">数据仪表板</h1>
        <div class="header-controls">
          <el-select v-model="days" placeholder="选择时间范围" @change="fetchDashboardData" class="time-selector" size="small">
            <el-option label="近7天" :value="7"></el-option>
            <el-option label="近30天" :value="30"></el-option>
            <el-option label="近90天" :value="90"></el-option>
          </el-select>
          <el-button type="primary" @click="fetchDashboardData" icon="i-shuaxin" circle class="refresh-btn" size="small"></el-button>
        </div>
      </div>

      <div class="dashboard-content">
        <!-- 左侧图表区域 -->
        <div class="main-content">
          <!-- 统计指标区域 -->
          <div class="stats-wrapper">
            <div class="stats-grid">
              <div class="stat-item primary">
                <i class="i-yonghuguanli stat-icon"></i>
                <div class="stat-info">
                  <span class="stat-label">总用户数</span>
                  <span class="stat-value">{{ dashboardData.statistics.userGrowth.total }}</span>
                </div>
              </div>
              <div class="stat-item success">
                <i class="i-fabuguanli stat-icon"></i>
                <div class="stat-info">
                  <span class="stat-label">总发布数</span>
                  <span class="stat-value">{{ dashboardData.statistics.contentPublish.total.publishes }}</span>
                </div>
              </div>
              <div class="stat-item warning">
                <i class="i-shipinguanli stat-icon"></i>
                <div class="stat-info">
                  <span class="stat-label">总视频数</span>
                  <span class="stat-value">{{ dashboardData.statistics.contentPublish.total.shortVideos }}</span>
                </div>
              </div>
              <div class="stat-item danger">
                <i class="i-dianzan stat-icon"></i>
                <div class="stat-info">
                  <span class="stat-label">总互动数</span>
                  <span class="stat-value">{{ dashboardData.statistics.interactions.total.likes + dashboardData.statistics.interactions.total.comments }}</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 图表网格 -->
          <div class="charts-grid">
            <div class="chart-container">
              <h3 class="chart-title">用户增长趋势</h3>
              <div ref="userGrowthChart" class="chart"></div>
            </div>
            <div class="chart-container">
              <h3 class="chart-title">内容发布趋势</h3>
              <div ref="contentPublishChart" class="chart"></div>
            </div>
            <div class="chart-container">
              <h3 class="chart-title">互动行为趋势</h3>
              <div ref="interactionChart" class="chart"></div>
            </div>
            <div class="chart-container">
              <h3 class="chart-title">内容分类统计</h3>
              <div ref="contentCategoryChart" class="chart"></div>
            </div>
            <div class="chart-container">
              <h3 class="chart-title">用户活跃时间热力图</h3>
              <div ref="userHeatmapChart" class="chart"></div>
            </div>
            <div class="chart-container">
              <h3 class="chart-title">热门用户排行</h3>
              <div ref="leaderboardChart" class="chart"></div>
            </div>
          </div>
        </div>

        <!-- 右侧表格区域 -->
        <div class="sidebar">
          <div class="sidebar-section">
            <h3 class="section-title">热门内容</h3>
            <div class="table-container">
              <el-table :data="dashboardData.leaderboards.topPublishes" style="width: 100%" size="small" height="120">
                <el-table-column prop="content" label="内容" show-overflow-tooltip></el-table-column>
                <el-table-column prop="like_count" label="点赞" width="40" align="center"></el-table-column>
                <el-table-column prop="author" label="作者" width="100" align="center"></el-table-column>
              </el-table>
            </div>
          </div>
          
          <div class="sidebar-section">
            <h3 class="section-title">热门短视频</h3>
            <div class="table-container">
              <el-table :data="dashboardData.leaderboards.topShortVideos" style="width: 100%" size="small" height="120">
                <el-table-column prop="title" label="标题" show-overflow-tooltip></el-table-column>
                <el-table-column prop="like_count" label="点赞" width="40" align="center"></el-table-column>
                <el-table-column prop="author" label="作者" width="100" align="center"></el-table-column>
              </el-table>
            </div>
          </div>
          
          <div class="sidebar-section">
            <h3 class="section-title">最新用户</h3>
            <div class="table-container">
              <el-table :data="dashboardData.recentActivities.recentUsers" style="width: 100%" size="small" height="120">
                <el-table-column prop="name" label="用户名" show-overflow-tooltip>
                  <template #default="scope">
                    <div class="user-cell">
                      <el-avatar :size="16" :src="scope.row.avatar" class="user-avatar"></el-avatar>
                      <span class="user-name">{{ scope.row.name }}</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="createdAt" label="注册时间" width="180" align="center"></el-table-column>
              </el-table>
            </div>
          </div>
          
          <div class="sidebar-section">
            <h3 class="section-title">最新内容</h3>
            <div class="table-container">
              <el-table :data="dashboardData.recentActivities.recentPublishes" style="width: 100%" size="small" height="120">
                <el-table-column prop="content" label="内容" show-overflow-tooltip></el-table-column>
                <el-table-column prop="author" label="作者" width="100" align="center"></el-table-column>
                <el-table-column prop="createdAt" label="发布时间" width="180" align="center"></el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </Layout>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import * as echarts from 'echarts'
import Layout from '@/components/Layout.vue'
import { getDashboardData, type DashboardData } from '@/api/modules/home'

// 初始化数据
const days = ref<number>(30)
const dashboardData = ref<DashboardData>({
  statistics: {
    userGrowth: {
      total: 0,
      dailyGrowth: [],
      monthlyGrowth: []
    },
    contentPublish: {
      total: {
        publishes: 0,
        shortVideos: 0
      },
      dailyPublishes: [],
      dailyShortVideos: []
    },
    interactions: {
      total: {
        likes: 0,
        comments: 0
      },
      dailyLikes: [],
      dailyComments: []
    },
    userActivity: {
      totalActiveUsers: 0,
      dailyActiveUsers: []
    },
    contentCategory: {
      publishes: {
        public: 0,
        private: 0
      },
      shortVideos: {
        public: 0,
        private: 0
      },
      publishImages: {
        withImages: 0,
        withoutImages: 0
      }
    },
    userHeatmap: []
  },
  leaderboards: {
    topUsers: [],
    topPublishes: [],
    topShortVideos: []
  },
  recentActivities: {
    recentUsers: [],
    recentPublishes: [],
    recentShortVideos: []
  }
})

// 图表实例
const userGrowthChart = ref<HTMLDivElement | null>(null)
const contentPublishChart = ref<HTMLDivElement | null>(null)
const interactionChart = ref<HTMLDivElement | null>(null)
const contentCategoryChart = ref<HTMLDivElement | null>(null)
const userHeatmapChart = ref<HTMLDivElement | null>(null)
const leaderboardChart = ref<HTMLDivElement | null>(null)
let userGrowthInstance: echarts.ECharts | null = null
let contentPublishInstance: echarts.ECharts | null = null
let interactionInstance: echarts.ECharts | null = null
let contentCategoryInstance: echarts.ECharts | null = null
let userHeatmapInstance: echarts.ECharts | null = null
let leaderboardInstance: echarts.ECharts | null = null

// 定时器引用
let dataRefreshTimer: number | null = null

// 获取仪表板数据
const fetchDashboardData = async () => {
  try {
    const res = await getDashboardData(days.value)
    dashboardData.value = res.data
    
    // 等待DOM更新后再更新图表
    await nextTick()
    // 更新所有图表
    updateCharts()
  } catch (error) {
    console.error('获取仪表板数据失败:', error)
  }
}

// 更新所有图表
const updateCharts = () => {
  updateUserGrowthChart()
  updateContentPublishChart()
  updateInteractionChart()
  updateContentCategoryChart()
  updateUserHeatmapChart()
  updateLeaderboardChart()
}

// 更新用户增长图表
const updateUserGrowthChart = () => {
  if (!userGrowthChart.value) return
  
  if (!userGrowthInstance) {
    userGrowthInstance = echarts.init(userGrowthChart.value)
  }
  
  const option = {
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(255, 255, 255, 0.9)',
      borderColor: '#ddd',
      borderWidth: 1,
      textStyle: {
        color: '#333'
      }
    },
    grid: {
      top: '10%',
      left: '5%',
      right: '5%',
      bottom: '10%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: dashboardData.value.statistics.userGrowth.dailyGrowth.map(item => item.date),
      axisLine: {
        lineStyle: {
          color: '#e0e0e0'
        }
      },
      axisLabel: {
        color: '#666',
        fontSize: 12
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: '#e0e0e0'
        }
      },
      axisLabel: {
        color: '#666',
        fontSize: 12
      },
      splitLine: {
        lineStyle: {
          color: '#f5f5f5'
        }
      }
    },
    series: [{
      data: dashboardData.value.statistics.userGrowth.dailyGrowth.map(item => item.count),
      type: 'line',
      smooth: true,
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(101, 183, 255, 0.3)'
          },
          {
            offset: 1,
            color: 'rgba(101, 183, 255, 0)'
          }
        ])
      },
      lineStyle: {
        color: '#65b7ff',
        width: 3
      },
      symbolSize: 6,
      symbol: 'circle',
      itemStyle: {
        color: '#65b7ff',
        borderWidth: 2,
        borderColor: '#fff'
      }
    }]
  }
  
  userGrowthInstance.setOption(option)
}

// 更新内容发布图表
const updateContentPublishChart = () => {
  if (!contentPublishChart.value) return
  
  if (!contentPublishInstance) {
    contentPublishInstance = echarts.init(contentPublishChart.value)
  }
  
  const option = {
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(255, 255, 255, 0.9)',
      borderColor: '#ddd',
      borderWidth: 1,
      textStyle: {
        color: '#333'
      }
    },
    legend: {
      data: ['发布内容', '短视频'],
      top: '5%',
      right: '5%',
      textStyle: {
        color: '#666',
        fontSize: 12
      }
    },
    grid: {
      top: '10%',
      left: '5%',
      right: '5%',
      bottom: '10%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: dashboardData.value.statistics.contentPublish.dailyPublishes.map(item => item.date),
      axisLine: {
        lineStyle: {
          color: '#e0e0e0'
        }
      },
      axisLabel: {
        color: '#666',
        fontSize: 12
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: '#e0e0e0'
        }
      },
      axisLabel: {
        color: '#666',
        fontSize: 12
      },
      splitLine: {
        lineStyle: {
          color: '#f5f5f5'
        }
      }
    },
    series: [
      {
        name: '发布内容',
        data: dashboardData.value.statistics.contentPublish.dailyPublishes.map(item => item.count),
        type: 'bar',
        barGap: '10%',
        barWidth: '30%',
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#65b7ff' },
            { offset: 1, color: '#4a90e2' }
          ])
        }
      },
      {
        name: '短视频',
        data: dashboardData.value.statistics.contentPublish.dailyShortVideos.map(item => item.count),
        type: 'bar',
        barGap: '10%',
        barWidth: '30%',
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#50d2c0' },
            { offset: 1, color: '#34c7b6' }
          ])
        }
      }
    ]
  }
  
  contentPublishInstance.setOption(option)
}

// 更新互动行为图表
const updateInteractionChart = () => {
  if (!interactionChart.value) return
  
  if (!interactionInstance) {
    interactionInstance = echarts.init(interactionChart.value)
  }
  
  const option = {
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(255, 255, 255, 0.9)',
      borderColor: '#ddd',
      borderWidth: 1,
      textStyle: {
        color: '#333'
      }
    },
    legend: {
      data: ['点赞数', '评论数'],
      top: '5%',
      right: '5%',
      textStyle: {
        color: '#666',
        fontSize: 12
      }
    },
    grid: {
      top: '10%',
      left: '5%',
      right: '5%',
      bottom: '10%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: [
        ...dashboardData.value.statistics.interactions.dailyLikes.map(item => item.date),
        ...dashboardData.value.statistics.interactions.dailyComments.map(item => item.date)
      ],
      axisLine: {
        lineStyle: {
          color: '#e0e0e0'
        }
      },
      axisLabel: {
        color: '#666',
        fontSize: 12
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: '#e0e0e0'
        }
      },
      axisLabel: {
        color: '#666',
        fontSize: 12
      },
      splitLine: {
        lineStyle: {
          color: '#f5f5f5'
        }
      }
    },
    series: [
      {
        name: '点赞数',
        data: dashboardData.value.statistics.interactions.dailyLikes.map(item => item.count),
        type: 'line',
        smooth: true,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(255, 159, 169, 0.3)'
            },
            {
              offset: 1,
              color: 'rgba(255, 159, 169, 0)'
            }
          ])
        },
        lineStyle: {
          color: '#ff9fa9',
          width: 3
        },
        symbolSize: 6,
        symbol: 'circle',
        itemStyle: {
          color: '#ff9fa9',
          borderWidth: 2,
          borderColor: '#fff'
        }
      },
      {
        name: '评论数',
        data: dashboardData.value.statistics.interactions.dailyComments.map(item => item.count),
        type: 'line',
        smooth: true,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(255, 209, 113, 0.3)'
            },
            {
              offset: 1,
              color: 'rgba(255, 209, 113, 0)'
            }
          ])
        },
        lineStyle: {
          color: '#ffd171',
          width: 3
        },
        symbolSize: 6,
        symbol: 'circle',
        itemStyle: {
          color: '#ffd171',
          borderWidth: 2,
          borderColor: '#fff'
        }
      }
    ]
  }
  
  // 去重并排序X轴数据
  const uniqueDates = Array.from(new Set(option.xAxis.data)).sort()
  option.xAxis.data = uniqueDates
  
  // 补全数据，确保每个日期都有对应的点赞和评论数据
  const likesMap = new Map(dashboardData.value.statistics.interactions.dailyLikes.map(item => [item.date, item.count]))
  const commentsMap = new Map(dashboardData.value.statistics.interactions.dailyComments.map(item => [item.date, item.count]))
  
  option.series[0].data = uniqueDates.map(date => likesMap.get(date) || 0)
  option.series[1].data = uniqueDates.map(date => commentsMap.get(date) || 0)
  
  interactionInstance.setOption(option)
}

// 更新内容分类图表
const updateContentCategoryChart = () => {
  if (!contentCategoryChart.value) return
  
  if (!contentCategoryInstance) {
    contentCategoryInstance = echarts.init(contentCategoryChart.value)
  }
  
  // 准备数据
  const publishData = [
    { name: '公开动态', value: dashboardData.value.statistics.contentCategory.publishes.public },
    { name: '私密动态', value: dashboardData.value.statistics.contentCategory.publishes.private }
  ];
  
  const videoData = [
    { name: '公开视频', value: dashboardData.value.statistics.contentCategory.shortVideos.public },
    { name: '私密视频', value: dashboardData.value.statistics.contentCategory.shortVideos.private }
  ];
  
  const imageData = [
    { name: '含图片动态', value: dashboardData.value.statistics.contentCategory.publishImages.withImages },
    { name: '无图片动态', value: dashboardData.value.statistics.contentCategory.publishImages.withoutImages }
  ];
  
  const option = {
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(255, 255, 255, 0.9)',
      borderColor: '#ddd',
      borderWidth: 1,
      textStyle: {
        color: '#333'
      }
    },
    legend: {
      bottom: '0%',
      left: 'center',
      textStyle: {
        color: '#666',
        fontSize: 12
      }
    },
    series: [
      {
        name: '内容分类',
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['50%', '45%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 4,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 14,
            fontWeight: 'bold',
            formatter: '{b}: {d}%'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          ...publishData.filter(item => item.value > 0).map(item => ({
            ...item,
            itemStyle: { color: item.name.includes('公开') ? '#65b7ff' : '#a18bff' }
          })),
          ...videoData.filter(item => item.value > 0).map(item => ({
            ...item,
            itemStyle: { color: item.name.includes('公开') ? '#50d2c0' : '#ff9fa9' }
          })),
          ...imageData.filter(item => item.value > 0).map(item => ({
            ...item,
            itemStyle: { color: item.name.includes('含图片') ? '#ffd171' : '#cfcfcf' }
          }))
        ]
      }
    ]
  };
  
  contentCategoryInstance.setOption(option);
}

// 更新用户热力图图表
const updateUserHeatmapChart = () => {
  if (!userHeatmapChart.value) return
  
  if (!userHeatmapInstance) {
    userHeatmapInstance = echarts.init(userHeatmapChart.value)
  }
  
  // 准备热力图数据
  const heatmapData = dashboardData.value.statistics.userHeatmap.map(item => [
    item.hourOfDay,
    item.dayOfWeek - 1, // ECharts中周日是0，周一到周六是1-6，后端数据中周日是1
    item.count
  ]);
  
  // 周几的标签
  const days = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
  
  // 小时标签
  const hours = Array.from({ length: 24 }, (_, i) => `${i}点`);
  
  const option = {
    tooltip: {
      position: 'top',
      backgroundColor: 'rgba(255, 255, 255, 0.9)',
      borderColor: '#ddd',
      borderWidth: 1,
      textStyle: {
        color: '#333'
      },
      formatter: (params: any) => {
        return `${days[params.value[1]]}<br />${params.value[0]}点: ${params.value[2]} 次活动`;
      }
    },
    grid: {
      height: '75%',
      top: '10%',
      left: '5%',
      right: '5%',
      bottom: '10%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: hours,
      splitArea: {
        show: true
      },
      axisLabel: {
        color: '#666',
        fontSize: 10
      },
      axisLine: {
        lineStyle: {
          color: '#e0e0e0'
        }
      }
    },
    yAxis: {
      type: 'category',
      data: days,
      splitArea: {
        show: true
      },
      axisLabel: {
        color: '#666',
        fontSize: 10
      },
      axisLine: {
        lineStyle: {
          color: '#e0e0e0'
        }
      }
    },
    visualMap: {
      min: 0,
      max: Math.max(...heatmapData.map(item => item[2]), 1),
      calculable: true,
      orient: 'horizontal',
      left: 'center',
      bottom: '-10%',
      inRange: {
        color: ['#f0f8ff', '#65b7ff']
      }
    },
    series: [{
      name: '用户活跃热力图',
      type: 'heatmap',
      data: heatmapData,
      label: {
        show: false
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }]
  };
  
  userHeatmapInstance.setOption(option);
}

// 更新排行榜图表
const updateLeaderboardChart = () => {
  if (!leaderboardChart.value) return
  
  if (!leaderboardInstance) {
    leaderboardInstance = echarts.init(leaderboardChart.value)
  }
  
  // 按发布数量降序排列，确保热门的在最上面
  const sortedTopUsers = [...dashboardData.value.leaderboards.topUsers]
    .sort((a, b) => b.publishCount - a.publishCount)
  
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      backgroundColor: 'rgba(255, 255, 255, 0.9)',
      borderColor: '#ddd',
      borderWidth: 1,
      textStyle: {
        color: '#333'
      }
    },
    grid: {
      top: '10%',
      left: '5%',
      right: '5%',
      bottom: '10%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: '#e0e0e0'
        }
      },
      axisLabel: {
        color: '#666',
        fontSize: 12
      },
      splitLine: {
        lineStyle: {
          color: '#f5f5f5'
        }
      }
    },
    yAxis: {
      type: 'category',
      // 确保数据从上到下是降序排列的
      data: sortedTopUsers.map(user => user.name).reverse(),
      axisLine: {
        lineStyle: {
          color: '#e0e0e0'
        }
      },
      axisLabel: {
        color: '#666',
        fontSize: 12,
        margin: 10
      }
    },
    series: [{
      // 数据也需要相应地反转
      data: sortedTopUsers.map(user => user.publishCount).reverse(),
      type: 'bar',
      barWidth: '60%',
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          { offset: 0, color: '#a18bff' },
          { offset: 1, color: '#7a67ff' }
        ])
      },
      label: {
        show: true,
        position: 'right',
        color: '#666',
        fontSize: 12,
        distance: 8
      }
    }]
  }
  
  leaderboardInstance.setOption(option)
}

// 窗口大小改变时重绘图表
const handleResize = () => {
  // 使用setTimeout确保DOM已经更新完成
  setTimeout(() => {
    if (userGrowthInstance) {
      userGrowthInstance.resize({
        animation: {
          duration: 300
        }
      })
    }
    if (contentPublishInstance) {
      contentPublishInstance.resize({
        animation: {
          duration: 300
        }
      })
    }
    if (interactionInstance) {
      interactionInstance.resize({
        animation: {
          duration: 300
        }
      })
    }
    if (contentCategoryInstance) {
      contentCategoryInstance.resize({
        animation: {
          duration: 300
        }
      })
    }
    if (userHeatmapInstance) {
      userHeatmapInstance.resize({
        animation: {
          duration: 300
        }
      })
    }
    if (leaderboardInstance) {
      leaderboardInstance.resize({
        animation: {
          duration: 300
        }
      })
    }
  }, 150)
}

// 组件挂载时获取数据
onMounted(() => {
  fetchDashboardData()
  // 设置定时器，每3秒获取一次数据
  dataRefreshTimer = window.setInterval(fetchDashboardData, 3000)
  window.addEventListener('resize', handleResize)
  
  // 初始渲染后调整图表大小
  setTimeout(() => {
    handleResize()
  }, 100)
})

// 组件销毁前清理事件监听器和图表实例
onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  // 清理定时器
  if (dataRefreshTimer) {
    window.clearInterval(dataRefreshTimer)
    dataRefreshTimer = null
  }
  if (userGrowthInstance) {
    userGrowthInstance.dispose()
    userGrowthInstance = null
  }
  if (contentPublishInstance) {
    contentPublishInstance.dispose()
    contentPublishInstance = null
  }
  if (interactionInstance) {
    interactionInstance.dispose()
    interactionInstance = null
  }
  if (contentCategoryInstance) {
    contentCategoryInstance.dispose()
    contentCategoryInstance = null
  }
  if (userHeatmapInstance) {
    userHeatmapInstance.dispose()
    userHeatmapInstance = null
  }
  if (leaderboardInstance) {
    leaderboardInstance.dispose()
    leaderboardInstance = null
  }
})
</script>

<style scoped>
.dashboard-container {
  padding: 15px;
  background: #f5f6f7;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  color: #333333;
  border: 1px solid #ebedf0;
}

.dashboard-title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  color: #333333;
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.time-selector {
  width: 110px;
}

.time-selector :deep(.el-input__wrapper) {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  box-shadow: none;
  height: 32px;
}

.time-selector :deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
}

.time-selector :deep(.el-input__inner) {
  color: white;
  font-weight: 500;
  font-size: 13px;
}

.time-selector :deep(.el-input__inner::placeholder) {
  color: rgba(255, 255, 255, 0.8);
}

.refresh-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  transition: all 0.3s ease;
}

.refresh-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(90deg);
}

.dashboard-content {
  display: flex;
  gap: 15px;
  flex: 1;
  min-height: 0;
}

/* 主要内容区域 */
.main-content {
  flex: 6;
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-width: 0;
}

.stats-wrapper {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  padding: 15px;
  flex: 0 0 100px;
  border: 1px solid #ebedf0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 15px;
  height: 100%;
}

.stat-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border-radius: 8px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  z-index: 1;
  border: 1px solid #f0f0f0;
  background: #ffffff;
}

.stat-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.stat-item.primary {
  border-left: 4px solid #409eff;
}

.stat-item.success {
  border-left: 4px solid #67c23a;
}

.stat-item.warning {
  border-left: 4px solid #e6a23c;
}

.stat-item.danger {
  border-left: 4px solid #f56c6c;
}

.stat-icon {
  font-size: 24px;
  margin-right: 12px;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: white;
  background: #f5f5f5;
}

.stat-item.primary .stat-icon {
  background: #409eff;
}

.stat-item.success .stat-icon {
  background: #67c23a;
}

.stat-item.warning .stat-icon {
  background: #e6a23c;
}

.stat-item.danger .stat-icon {
  background: #f56c6c;
}

.stat-info {
  display: flex;
  flex-direction: column;
}

.stat-label {
  font-size: 13px;
  color: #666666;
  margin-bottom: 3px;
  font-weight: 400;
}

.stat-value {
  font-size: 20px;
  font-weight: 600;
  color: #333333;
}

/* 图表网格区域 */
.charts-grid {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  padding: 15px;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(250px, 1fr);
  gap: 15px;
  border: 1px solid #ebedf0;
  overflow: hidden;
}

.chart-container {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #ffffff;
  border-radius: 8px;
  padding: 12px;
  transition: all 0.3s ease;
  border: 1px solid #f0f0f0;
  overflow: hidden;
}

.chart-title {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: 500;
  color: #333333;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 22px;
}

.chart {
  flex: 1;
  min-height: 0;
  width: 100%; /* 确保图表占满容器宽度 */
}

/* 右侧边栏 */
.sidebar {
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-width: 0;
}

.sidebar-section {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  padding: 15px;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  border: 1px solid #ebedf0;
}

.section-title {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: 500;
  color: #333333;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 22px;
}

.table-container {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

:deep(.el-table) {
  height: 100%;
}

:deep(.el-table__body-wrapper) {
  flex: 1;
}

:deep(.el-table th) {
  font-size: 12px;
  padding: 5px 0;
  background-color: #fafafa;
  color: #666666;
  font-weight: 500;
}

:deep(.el-table td) {
  font-size: 12px;
  padding: 3px 0;
  color: #333333;
}

/* 用户单元格 */
.user-cell {
  display: flex;
  align-items: center;
}

.user-avatar {
  margin-right: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.user-name {
  font-weight: 400;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #333333;
}
</style>
